import { Badge, TabBar } from 'antd-mobile'
import React, { useState } from 'react'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useHistory } from 'react-router'

const Index = () => {
  const history = useHistory()
  const tabs = [
    {
      key: '/home/main',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/home/car',
      title: '购物车',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/home/my',
      title: '我的',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />,
    },
  ]


  return (
    <>
      <TabBar onChange={ pathname => history.push({ pathname }) }>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
}

export default Index